<template>
  <div class="content">
    <div class="detail">
      <img
        :src="item.user.avatarUrl + '?imageView=1&type=webp&thumbnail=253x0'"
        alt=""
      />
      <div class="nickname">
        <div class="name">{{ item.user.nickname }}</div>
        <div class="time">{{ item.time | formatTime }}</div>
      </div>
      <div class="likedCount">
        {{ item.likedCount }}
        <span>
          <img src="../assets/images/comment-dianzan.png"
        /></span>
      </div>
    </div>
    <div class="contentDetail">{{ item.content }}</div>
  </div>
</template>
<script>
export default {
  name: "Comment",
  props: ["item"],

  created() {},
  
  filters: {
    formatTime(time) {
      var commonTime = "";
      if (time) {
        var unixTimestamp = new Date(time * 1);
        commonTime = unixTimestamp.toLocaleString();
        // console.log(commonTime)
      }
      return commonTime;
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.content {
  .detail {
    display: flex;
    img {
      width: 40px;
      border-radius: 50%;
      flex: 0.6;
    }
    .nickname {
      margin-left: 10px;
      color: #979191;
      flex: 3.5;
      .time {
        font-size: 14px;
        margin-top: 2px;
      }
    }
    .likedCount {
      text-align: right;
      color: #979191;
      font-size: 14px;
      flex: 1.2;
      span {
        img {
          width: 22px;
          vertical-align: bottom;
        }
      }
    }
  }
  .contentDetail {
    margin-top: 4px;
    margin-left: 50px;
    width: 82%;
  }
}
</style>